import React, { Component } from 'react';
import { Row, Col, Tooltip } from 'antd';


export default class Nav extends Component{

    constructor(props){
        super(props);
        this.state = { menu: 'biji' };
    }

    sendMenu = (event) =>{
        this.setState({ menu: event.target.getAttribute("data-menu") },()=>{
            // to subscribe
            PubSub.publish('getMenu', this.state.menu);
        })
    }

    render(){
        return(
            <div className="nav">
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="新建笔记">
                            <i className="icon add-img" data-menu="Add" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="搜索">
                            <i className="icon search-img" data-menu="Search" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="笔记">
                            <i className="icon biji-img" data-menu="Biji" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="笔记本">
                            <i className="icon book-img" data-menu="Book" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="废纸篓">
                            <i className="icon trash-img" data-menu="Trash" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="标签">
                           <i className="icon tag-img" data-menu="Tag" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="笔友圈">
                            <i className="icon circle-img" data-menu="Circle" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <Tooltip placement="rightTop" title="账户">
                            <i className="icon user-img" data-menu="User" onClick={ this.sendMenu }></i>
                        </Tooltip>
                    </Col>
                </Row>
            </div>
        );
    }
}